<!--店铺浏览-->
<style>
.contain {
  height: 86%;
  overflow: auto;
}

.header {
  height: 10%;
  border-bottom: 1px #CCCCCC solid;
  margin-bottom: 3px;
}

.header .vux-flexbox {
  height: 100%;
}

.main .vux-flexbox {
  height: 50%;
  margin-bottom: 3px;
}

.main .vux-flexbox-item {
  /*height: 100%;*/
}

.main .flex-demo {
  border: 1px #CCCCCC solid;
}

.flex-demo {
  text-align: center
}

.input {
  width: 80%;
  display: inline;
}

.main {
  height: 30%;
}

._v-container {
  position: relative !important;
}

.store-list-contain {
  width: 97%;
  height: 80px;
  margin-bottom: 3px;
  margin-left: 3px;
  margin-right: 3px;
  border: 1px #CCCCCC solid;
  padding: 1px;
}

.store-list .store-name {
  margin-top: 10px;
  margin-left: 10px;
  display: inline-block;
  position: absolute;
}

.store-list .store-area {
  margin-top: 50px;
  margin-left: 10px;
  display: inline-block;
  position: absolute;
  width: 65%;
}

</style>
<template>
  <div class="contain">
    <div class="header">
      <flexbox>
        <flexbox-item :span="1/5">
          <div class="flex-demo">
            {{cityName}}
          </div>
        </flexbox-item>
        <flexbox-item :span="4/5">
          <x-input placeholder="搜.." class="input" v-model="seachContent" novalidate :show-clear="true" placeholder-align="left">
            <img slot="right" @click="search" class="weui-vcode-img" style="height: 20px;" src="../../static/img/search.png">
          </x-input>
        </flexbox-item>
      </flexbox>
    </div>
    <div class="main">
      <flexbox>
        <flexbox-item>
          <div class="flex-demo">
            美食
          </div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-demo">
            服装
          </div>
        </flexbox-item>
      </flexbox>
      <flexbox>
        <flexbox-item>
          <div class="flex-demo">
            美容美发
          </div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-demo">
            休闲娱乐
          </div>
        </flexbox-item>
      </flexbox>
    </div>
    <div>
      <div style="background: #EE3A4A;">
        &nbsp;热门店铺
      </div>
      <div class="store-list">
        <scroller :on-refresh="refresh" :on-infinite="loadMore" height="513" ref="myscroller">
          <div class="store-list-contain" v-for="item in data" @click="showStoreThoughts(item.id)">
            <img :src="item.image" height="80px"></img>
            <div class="store-name">
              {{item.storeName}}
            </div>
            <div class="store-area">
              {{item.area}}&nbsp;{{item.busiDistrict}}
              <div style="display: inline;float: right; margin-right: 10px;">
                {{item.thoughtCount}}
                <img height="20px" style="vertical-align: middle;margin-bottom: 3px;margin-left: -4px;" src="../../static/img/thought.png"></img>
              </div>
              <div style="display: inline;">
              </div>
            </div>
          </div>
        </scroller>
      </div>
    </div>
  </div>
</template>
<script>
import { XInput, Flexbox, FlexboxItem, Divider } from 'vux'
export default {
  components: {
    XInput,
    Flexbox,
    FlexboxItem,
    Divider
  },
  data() {
    return {
      userId: window.localStorage["userId"],
      cityName: "杭州",
      seachContent: '',
      data: [],
      pageNo: 1,
      tip: '加载中'
    }
  },
  created() {

  },
  methods: {
    showStoreThoughts(storeId) {
      this.$router.push({
        path: '/tourl/storeThoughts',
        query: {
          storeId: storeId
        }
      })
    },
    refresh() {
      setTimeout(() => {
        this.pageNo = 1
        this.data = []
        this.load()
        this.$refs.myscroller.finishPullToRefresh()
      }, 500)
    },
    loadMore() {
      //为了出现加载动作
      setTimeout(() => {
        this.load()
      }, 500)
    },
    load() {
      let _that = this;
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/scans/queryHotStore.json",
        params: {
          userId: this.userId,
          cityName: this.cityName,
          pageNo: this.pageNo
        },
        successFc: (response) => {
          if (response.data.data == null) {
            _that.$refs.myscroller.finishInfinite(0);
            return;
          }
          if (response.data.data) {
            response.data.data.forEach(function(o) { //分别对应：数组元素，元素的索引，数组本身
              _that.data.push(o)
            })
          }
          _that.$refs.myscroller.finishInfinite(1);
        }
      });
      this.pageNo++;
    },
    search() {
      this.$router.push({
        path: '/tourl/storeList',
        query: {
          searchContent: this.seachContent,
          cityName: this.cityName
        }
      })
    }
  }
}

</script>
